<template>
  <view class="page">
    <u-sticky>
      <view :style="{ padding: '20rpx', backgroundColor: '#f5f5f5' }">
        <u-input
          v-model="searchText"
          placeholder="搜索你需要的内容"
          suffix-icon="search"
          clearable
          suffix-icon-style="color: #909399"
          shape="circle"
          border="none"
          font-size="26rpx"
          @confirm="handleSearch"
          :custom-style="{
            background: '#FFFFFF',
            padding: '12rpx',
          }"
        ></u-input>
      </view>
    </u-sticky>
    <view class="goods-box">
      <Goods-item v-for="(i, k) in dataList" :key="k" :row="i" />
    </view>
    <u-loadmore :status="status" height="60rpx" />
  </view>
</template>
<script>
import GoodsItem from "@/pages/mall/cp/GoodsItem";

import config from '@/request/baseUrl.js';
import { mallGoodsList, mallGoodsSearch } from "@/request/mallApi.js";

export default {
  components: { GoodsItem },
  data() {
    return {
      typeId: "", // 商品分类
      searchText: "", // 搜索内容
      dataList: [], // 商品列表
      status: "loadmore", // 加载状态
      page: 1, // 页数
      total: 0, // 总数
    };
  },
  onLoad(e) {
    this.typeId = e.id;
    this.getDataList();
  },
  onReachBottom() {
    if (this.total == this.dataList.length) return;
    this.page++;
    if (this.searchText) {
      this.getSearchList(true);
    } else {
      this.getDataList(true);
    }
  },
  methods: {
    // 处理搜索
    handleSearch() {
      this.page = 1;
      this.total = 0;
      this.dataList = [];
      if (this.searchText) {
        this.getSearchList();
      } else {
        this.getDataList();
      }
    },
    // 搜索商品
    getSearchList(v) {
      let data = {
        search: this.searchText,
        sort: "weigh", //weigh综合 sales销量 createtime上架时间 price价格
        order: "asc",
        page: this.page,
        type: "goods",
      };
      this.status = "loading";
      mallGoodsSearch(data)
        .then((res) => {
          if (res.code == 1) {
            let data = res.data;
            data.data.forEach((i) => {
              i.image = config.baseUrl + i.image;
            });
            this.dataList = v ? this.dataList.concat(data.data) : data.data;
            this.total = data.total;
          }
        })
        .finally(() => {
          this.status = this.total > this.dataList.length ? "loadmore" : "nomore";
        });
    },
    // 获取商品列表
    getDataList(v) {
      let params = {
        id: this.typeId,
        page: this.page,
      };
      this.status = "loading";
      mallGoodsList(params)
        .then((res) => {
          if (res.code == 1) {
            let data = res.data.goods;
            data.data.forEach((i) => {
              i.image = config.baseUrl + i.image;
            });
            this.dataList = v ? this.dataList.concat(data.data) : data.data;
            this.total = data.total;
          }
        })
        .finally(() => {
          this.status = this.total > this.dataList.length ? "loadmore" : "nomore";
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.page {
  min-height: calc(100vh - 44px);
  background-color: #f5f5f5;
  .goods-box {
    display: grid;
    grid-template-columns: repeat(2, calc(50% - 10rpx));
    grid-gap: 15rpx;
    gap: 20rpx;
    padding: 20rpx;
  }
}
</style>
